languageDisplay.ts ➔ doUpdateLanguageDisplay - Code Metrics - Inspection of "Merge pull request #151 from Serraniel/feature/#48..." - Serraniel/AniwatchPlus - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — develop ( d6666c...ebd0be )

by Daniel

created 2020-12-30 16:24 UTC

languageDisplay.ts ➔ doUpdateLanguageDisplay F

↳ Parent: src/javascript/enhancements/languageDisplay.ts

Complexity

Conditions

Size

Total Lines	181
Code Lines	145

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	14
eloc	145
dl	0
loc	181
rs	2.52
c	0
b	0
f	0

How to fix Long Method Complexity

import { getGlobalConfiguration, SETTINGS_animeLanguageDisplay } from '../configuration/configuration';
import * as core from '../utils/aniwatchCore';
import * as helper from '../utils/helpers';

const MANIPULATED_ATTR_NAME = 'awpManipulated';

export function init(): void {
    getGlobalConfiguration().getProperty(SETTINGS_animeLanguageDisplay, value => {
        if (value) {
            core.registerScript((node: Node) => {
                // run the scripts
                if (node instanceof Element) {
                    updateLanguageDisplay(node)
                }
            }, "^/anime/[0-9]*$");
        }
    });
}

function updateLanguageDisplay(node: Element): void {
    const LIST_NODE_NAME = 'MD-LIST-ITEM';
    const BOX_NODE_NAME = 'DIV';
    const BOX_CLASS_NAME = 'card-margin';

    if (node.nodeName === LIST_NODE_NAME) {
        updateLanguageDisplayListMode(node);
    }
    else if (node.nodeName === BOX_NODE_NAME && node.classList.contains(BOX_CLASS_NAME)) {
        updateLanguageDisplayBoxMode(node);
    }
}

function updateLanguageDisplayListMode(node: Element): void {
    // last column with flags
    let col = node.querySelector('h3.layout-align-end-center');

    if (!helper.assigned(col) || col.hasAttribute(MANIPULATED_ATTR_NAME)) {
        return;
    }

    doUpdateLanguageDisplay(col, false);
}

function updateLanguageDisplayBoxMode(node: Element): void {
    // last column with flags
    let col = node.querySelector('div.layout-align-end-start');

    if (!helper.assigned(col) || col.hasAttribute(MANIPULATED_ATTR_NAME)) {
        return;
    }

    doUpdateLanguageDisplay(col, true);
}


function doUpdateLanguageDisplay(parent: Element, isBoxedModed: boolean): void {
    const LIST_LANG_PREFIX = 'ep.lang.';
    const BOX_LANG_PREFIX = 'episodeObject.lang.';
    // aniwatch uses different prefixes in list und box mode :/
    let realLangPrefix = isBoxedModed ? BOX_LANG_PREFIX : LIST_LANG_PREFIX;

    const DUB_SUFFIX = 'dub';
    const SUB_SUFFIX = 'sub';

    const DUB_ICON = 'volume_up';
    const SUB_ICON = 'closed_caption';
    const ZERO_WIDTH_SPACE_CHARACTER = ''; // &#8203;

    let subs: Array<string> = [];
    let dubs: Array<string> = [];

    // find subs
    let subCols = parent.querySelectorAll('[ng-hide*="sub"]');
    subCols.forEach((element: Element) => {
        let langAttr = element.attributes['ng-hide'].value;
        let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(SUB_SUFFIX));
        if (element.attributes['aria-hidden'].value == 'false') {
            subs.push(lang);
        }
    });

    // find dubs
    let dubCols = parent.querySelectorAll('[ng-hide*="dub"]');
    dubCols.forEach((element: Element) => {
        let langAttr = element.attributes['ng-hide'].value;
        let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(DUB_SUFFIX));
        if (element.attributes['aria-hidden'].value == 'false') {
            dubs.push(lang);
        }
    });

    // build output html
    let iconsRequired = true;
    let cols = [];

    // subs first;
    if (subs.length > 0) {
        let colDiv = document.createElement('div');
        colDiv.setAttribute('layout', 'column');
        colDiv.classList.add('layout-column');

        // do we have dubs?
        if (dubs.length > 0) {
            let dubDiv = document.createElement('div');
            dubDiv.setAttribute('layout', 'row');
            dubDiv.setAttribute('layout-align', 'start center');
            dubDiv.classList.add('layout-align-start-center', 'layout-row');

            let dubIconDiv = document.createElement('i');
            if (iconsRequired) {
                dubIconDiv.classList.add('material-icons', 'mr-3');
                dubIconDiv.innerText = DUB_ICON;
            }
            // add dummy with 24px for correct presentation
            else {
                dubIconDiv.style.height = '24px';
                dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
            }

            dubDiv.appendChild(dubIconDiv);

            let japIcon = document.createElement('i');
            japIcon.classList.add('flag', 'flag-jp', 'mg-all-1');
            dubDiv.appendChild(japIcon);

            colDiv.appendChild(dubDiv);
        }

        // do the subs
        let subDiv = document.createElement('div');
        subDiv.setAttribute('layout', 'row');
        subDiv.setAttribute('layout-align', 'start center');
        subDiv.classList.add('layout-align-start-center', 'layout-row');

        let subIconDiv = document.createElement('i');
        if (iconsRequired) {
            subIconDiv.classList.add('material-icons', 'mr-3');
            subIconDiv.innerText = SUB_ICON;
        }
        // add dummy with 24px for correct presentation
        else {
            subIconDiv.style.height = '24px';
            subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
        }

        subDiv.appendChild(subIconDiv);
        subs.forEach((lang: string) => {
            let langIcon = document.createElement('i');
            langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
            subDiv.appendChild(langIcon);
        });

        colDiv.appendChild(subDiv);

        cols.push(colDiv);
        iconsRequired = false;
    }

    if (dubs.length > 0) {
        dubs.forEach((lang: string) => {
            let colDiv = document.createElement('div');
            colDiv.setAttribute('layout', 'column');
            colDiv.classList.add('layout-column');

            let dubDiv = document.createElement('div');
            dubDiv.setAttribute('layout', 'row');
            dubDiv.setAttribute('layout-align', 'start center');
            dubDiv.classList.add('layout-align-start-center', 'layout-row');

            let dubIconDiv = document.createElement('i');
            if (iconsRequired) {
                dubIconDiv.classList.add('material-icons', 'mr-3');
                dubIconDiv.innerText = DUB_ICON;
            }
            // add dummy with 24px for correct presentation
            else {
                dubIconDiv.style.height = '24px';
                dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
            }

            dubDiv.appendChild(dubIconDiv);

            let langIcon = document.createElement('i');
            langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
            dubDiv.appendChild(langIcon);

            colDiv.appendChild(dubDiv);

            // do we have subs?
            if (subs.length > 0) {
                let subDiv = document.createElement('div');
                subDiv.setAttribute('layout', 'row');
                subDiv.setAttribute('layout-align', 'start center');
                subDiv.classList.add('layout-align-start-center', 'layout-row');

                let subIconDiv = document.createElement('i');
                if (iconsRequired) {
                    subIconDiv.classList.add('material-icons', 'mr-3');
                    subIconDiv.innerText = SUB_ICON;
                }
                // add dummy with 24px for correct presentation
                else {
                    subIconDiv.style.height = '24px';
                    subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
                }

                subDiv.appendChild(subIconDiv);
                colDiv.appendChild(subDiv);
            }

            cols.push(colDiv);
            iconsRequired = false;
        });
    }

    parent.innerHTML = '';
    cols.forEach(div => {
        parent.appendChild(div);
    });

    parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
        if (div instanceof HTMLElement) {
            div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
        }
    })

    parent.querySelectorAll('.layout-column').forEach(div => {
        if (div instanceof HTMLElement) {
            div.style.paddingLeft = '2px';
            div.style.paddingRight = '2px';
        }
    })

    parent.setAttribute('awpManipulated', String(true));
}


1			import { getGlobalConfiguration, SETTINGS_animeLanguageDisplay } from '../configuration/configuration';
2			import * as core from '../utils/aniwatchCore';
3			import * as helper from '../utils/helpers';
4
5			const MANIPULATED_ATTR_NAME = 'awpManipulated';
6
7			export function init(): void {
8			getGlobalConfiguration().getProperty(SETTINGS_animeLanguageDisplay, value => {
9			if (value) {
10			core.registerScript((node: Node) => {
11			// run the scripts
12			if (node instanceof Element) {
13			updateLanguageDisplay(node)
14			}
15			}, "^/anime/[0-9]*$");
16			}
17			});
18			}
19
20			function updateLanguageDisplay(node: Element): void {
21			const LIST_NODE_NAME = 'MD-LIST-ITEM';
22			const BOX_NODE_NAME = 'DIV';
23			const BOX_CLASS_NAME = 'card-margin';
24
25			if (node.nodeName === LIST_NODE_NAME) {
26			updateLanguageDisplayListMode(node);
27			}
28			else if (node.nodeName === BOX_NODE_NAME && node.classList.contains(BOX_CLASS_NAME)) {
29			updateLanguageDisplayBoxMode(node);
30			}
31			}
32
33			function updateLanguageDisplayListMode(node: Element): void {
34			// last column with flags
35			let col = node.querySelector('h3.layout-align-end-center');
36
37			if (!helper.assigned(col) \|\| col.hasAttribute(MANIPULATED_ATTR_NAME)) {
38			return;
39			}
40
41			doUpdateLanguageDisplay(col, false);
42			}
43
44			function updateLanguageDisplayBoxMode(node: Element): void {
45			// last column with flags
46			let col = node.querySelector('div.layout-align-end-start');
47
48			if (!helper.assigned(col) \|\| col.hasAttribute(MANIPULATED_ATTR_NAME)) {
49			return;
50			}
51
52			doUpdateLanguageDisplay(col, true);
53			}
54
55
56			function doUpdateLanguageDisplay(parent: Element, isBoxedModed: boolean): void {
57			const LIST_LANG_PREFIX = 'ep.lang.';
58			const BOX_LANG_PREFIX = 'episodeObject.lang.';
59			// aniwatch uses different prefixes in list und box mode :/
60			let realLangPrefix = isBoxedModed ? BOX_LANG_PREFIX : LIST_LANG_PREFIX;
61
62			const DUB_SUFFIX = 'dub';
63			const SUB_SUFFIX = 'sub';
64
65			const DUB_ICON = 'volume_up';
66			const SUB_ICON = 'closed_caption';
67			const ZERO_WIDTH_SPACE_CHARACTER = ''; //
68
69			let subs: Array<string> = [];
70			let dubs: Array<string> = [];
71
72			// find subs
73			let subCols = parent.querySelectorAll('[ng-hide*="sub"]');
74			subCols.forEach((element: Element) => {
75			let langAttr = element.attributes['ng-hide'].value;
76			let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(SUB_SUFFIX));
77			if (element.attributes['aria-hidden'].value == 'false') {
78			subs.push(lang);
79			}
80			});
81
82			// find dubs
83			let dubCols = parent.querySelectorAll('[ng-hide*="dub"]');
84			dubCols.forEach((element: Element) => {
85			let langAttr = element.attributes['ng-hide'].value;
86			let lang = langAttr.substring(langAttr.indexOf(realLangPrefix) + realLangPrefix.length, langAttr.indexOf(DUB_SUFFIX));
87			if (element.attributes['aria-hidden'].value == 'false') {
88			dubs.push(lang);
89			}
90			});
91
92			// build output html
93			let iconsRequired = true;
94			let cols = [];
95
96			// subs first;
97			if (subs.length > 0) {
98			let colDiv = document.createElement('div');
99			colDiv.setAttribute('layout', 'column');
100			colDiv.classList.add('layout-column');
101
102			// do we have dubs?
103			if (dubs.length > 0) {
104			let dubDiv = document.createElement('div');
105			dubDiv.setAttribute('layout', 'row');
106			dubDiv.setAttribute('layout-align', 'start center');
107			dubDiv.classList.add('layout-align-start-center', 'layout-row');
108
109			let dubIconDiv = document.createElement('i');
110			if (iconsRequired) {
111			dubIconDiv.classList.add('material-icons', 'mr-3');
112			dubIconDiv.innerText = DUB_ICON;
113			}
114			// add dummy with 24px for correct presentation
115			else {
116			dubIconDiv.style.height = '24px';
117			dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
118			}
119
120			dubDiv.appendChild(dubIconDiv);
121
122			let japIcon = document.createElement('i');
123			japIcon.classList.add('flag', 'flag-jp', 'mg-all-1');
124			dubDiv.appendChild(japIcon);
125
126			colDiv.appendChild(dubDiv);
127			}
128
129			// do the subs
130			let subDiv = document.createElement('div');
131			subDiv.setAttribute('layout', 'row');
132			subDiv.setAttribute('layout-align', 'start center');
133			subDiv.classList.add('layout-align-start-center', 'layout-row');
134
135			let subIconDiv = document.createElement('i');
136			if (iconsRequired) {
137			subIconDiv.classList.add('material-icons', 'mr-3');
138			subIconDiv.innerText = SUB_ICON;
139			}
140			// add dummy with 24px for correct presentation
141			else {
142			subIconDiv.style.height = '24px';
143			subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
144			}
145
146			subDiv.appendChild(subIconDiv);
147			subs.forEach((lang: string) => {
148			let langIcon = document.createElement('i');
149			langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
150			subDiv.appendChild(langIcon);
151			});
152
153			colDiv.appendChild(subDiv);
154
155			cols.push(colDiv);
156			iconsRequired = false;
157			}
158
159			if (dubs.length > 0) {
160			dubs.forEach((lang: string) => {
161			let colDiv = document.createElement('div');
162			colDiv.setAttribute('layout', 'column');
163			colDiv.classList.add('layout-column');
164
165			let dubDiv = document.createElement('div');
166			dubDiv.setAttribute('layout', 'row');
167			dubDiv.setAttribute('layout-align', 'start center');
168			dubDiv.classList.add('layout-align-start-center', 'layout-row');
169
170			let dubIconDiv = document.createElement('i');
171			if (iconsRequired) {
172			dubIconDiv.classList.add('material-icons', 'mr-3');
173			dubIconDiv.innerText = DUB_ICON;
174			}
175			// add dummy with 24px for correct presentation
176			else {
177			dubIconDiv.style.height = '24px';
178			dubIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
179			}
180
181			dubDiv.appendChild(dubIconDiv);
182
183			let langIcon = document.createElement('i');
184			langIcon.classList.add('flag', `flag-${lang}`, 'mg-all-1');
185			dubDiv.appendChild(langIcon);
186
187			colDiv.appendChild(dubDiv);
188
189			// do we have subs?
190			if (subs.length > 0) {
191			let subDiv = document.createElement('div');
192			subDiv.setAttribute('layout', 'row');
193			subDiv.setAttribute('layout-align', 'start center');
194			subDiv.classList.add('layout-align-start-center', 'layout-row');
195
196			let subIconDiv = document.createElement('i');
197			if (iconsRequired) {
198			subIconDiv.classList.add('material-icons', 'mr-3');
199			subIconDiv.innerText = SUB_ICON;
200			}
201			// add dummy with 24px for correct presentation
202			else {
203			subIconDiv.style.height = '24px';
204			subIconDiv.innerText = ZERO_WIDTH_SPACE_CHARACTER;
205			}
206
207			subDiv.appendChild(subIconDiv);
208			colDiv.appendChild(subDiv);
209			}
210
211			cols.push(colDiv);
212			iconsRequired = false;
213			});
214			}
215
216			parent.innerHTML = '';
217			cols.forEach(div => {
218			parent.appendChild(div);
219			});
220
221			parent.querySelectorAll('.layout-column:not(:last-child)').forEach(div => {
222			if (div instanceof HTMLElement) {
223			div.style.borderRight = '1px solid rgba(155,155,155, 0.2)';
224			}
225			})
226
227			parent.querySelectorAll('.layout-column').forEach(div => {
228			if (div instanceof HTMLElement) {
229			div.style.paddingLeft = '2px';
230			div.style.paddingRight = '2px';
231			}
232			})
233
234			parent.setAttribute('awpManipulated', String(true));
235			}
236

Serraniel / AniwatchPlus

Push — develop ( d6666c...ebd0be )

languageDisplay.ts ➔ doUpdateLanguageDisplay F

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like